<template>
  <swiper @click="closeSwiper" class="previewImageSwiper" ref="mySwiper" :options="swiperOption">
    <swiper-slide class="swiperSlider" v-for="(item,index) in previewImageUrls" :key="index">
        <img class="previewImg" v-lazy="item" alt="">
    </swiper-slide>
  </swiper>
</template>

<script>
import { mapGetters ,mapActions} from "vuex";
export default {
  name: "PreviewImage",
  computed: {
      ...mapGetters(["previewImageUrls","previewImageCurrentIndex"]),
    swiperOption() {
      var that = this;
      return {
        initialSlide:that.previewImageCurrentIndex
      };
    },
    mySwiper() {
      return this.$refs.mySwiper.swiper;
    }
  },
  methods:{
      ...mapActions(["hidePreviewImage"]),
      closeSwiper(){
        this.hidePreviewImage();
      }
  }
};
</script>

<style lang="scss" scoped>
    .previewImageSwiper{
        width: 100vw;
        height: 100vh;
        position: fixed;
        top: 0px;
        left: 0px;
        background-color: #000000;
        z-index: 9999;
        .swiperSlider{
            display: flex;
            align-items: center;
        }
        .previewImg{
            width: 100%;
            height: auto;
            max-height: 100%;
            display: block;
        }
    }
</style>
